
window.addEventListener('load', function () {

    var swiper_button_prev = document.querySelector('.swiper_button_prev');//左侧按钮
    var swiper_button_next = document.querySelector('.swiper_button_next'); //右侧按钮
    var swiper = document.querySelector('.swiper'); //父盒子
    var swiperWidth = swiper.offsetWidth; //图片的宽度

    // 两侧按钮显示隐藏事件
    swiper.addEventListener('mouseover', function () {
        swiper_button_prev.style.display = 'block';
        swiper_button_next.style.display = 'block';
        clearInterval(timr);
        timr = null;//清除定时器

    })
    swiper.addEventListener('mouseout', function () {
        swiper_button_prev.style.display = 'none';
        swiper_button_next.style.display = 'none';
        timr = setInterval(function () {
            swiper_button_next.click(); //调用点击事件
        },
            3000)



    })
    var ul = swiper.querySelector('ul');
    var ol = swiper.querySelector('.swiper_button_bottom');
    // 动态生成 小横杠
    //ul.children.length  ul孩子的长度
    for (var i = 0; i < ul.children.length; i++) {
        // 创建一个 li元素
        var li = document.createElement('li');
        // 创建ol.li的自定义属性
        li.setAttribute('data_index', i)
        // li插入ol元素里面
        ol.appendChild(li);
        li.addEventListener('click', function () {
            for (let i = 0; i < ol.children.length; i++) {
                ol.children[i].className = '';

            }
            this.className = 'current';
            // 点击小圆圈，移动图片，移动的是ul
            // ul 的移动距离就是小横杠的索引号 * 图片的宽度 往左走是 负值
            var data_index = this.getAttribute('data_index');//获取当前属性的值
            // 点击了li 就要把data_index的值给num
            num = data_index;
            // circle 控制小圆圈的播放  data_ndeix值给circle
            circle = data_index;
            animate(ul, -data_index * swiperWidth);
        })
    }
    // 把ol里面第一个li设置类名current
    ol.children[0].className = 'current';
    // 克隆第一张图片放到UL最后面
    var first = ul.children[0].cloneNode(true); //cloneNode(true) 深克隆
    ul.appendChild(first)//放到UL最后面

    // 点击右侧按钮，图片滚动一张
    var num = 0;
    // circle 控制小圆圈的播放
    var circle = 0;
    // flag 节流阀
    var flag = 'true';
    swiper_button_next.addEventListener('click', function () {
        if (flag) {
            flag = false; //关闭节流阀
            // 如果走到最后一张图片，此时ul要快速复原 left值改为0
            if (num == ul.children.length - 1) {
                ul.style.left = 0;
                num = 0;

            }
            num++;
            animate(ul, -num * swiperWidth, function () {
                flag = true; //打开节流阀
            });
            // 控制右侧按钮和小横杠一起变化
            circle++;
            // 如果circle 等于ol.children.length - 1就复原
            if (circle == ol.children.length) {
                circle = 0;
            }

            circleChange(); //清除类名调用函数
        }

    });


    // 左侧按钮
    swiper_button_prev.addEventListener('click', function () {
        // 如果走到最后一张图片，此时ul要快速复原 left值改为0
        if (flag) {
            flag = false;
            if (num == 0) {
                num = ul.children.length - 1;
                ul.style.left = -num * swiperWidth + 'px';
            }
            num--;
            animate(ul, -num * swiperWidth, function () {
                flag = true; //回调函数控制节流阀
            })
            // 控制右侧按钮和小横杠一起变化
            circle--;
            // 如果circle < 0 就复原 则小横杠要改成最后一个

            if (circle < 0) {
                circle = ol.children.length - 1;
            }
            // circle = circle < 0 ? ol.children.length - 1 : cirle
            circleChange();//清除类名调用函数 
        }
    });

    function circleChange() {
        // 清除其余小圆圈的类名
        for (let i = 0; i < ol.children.length; i++) {
            ol.children[i].className = '';

        }
        // 留下当前小圆圈的类名
        ol.children[circle].className = 'current';
    }
    // 自动播放模块

    var timr = setInterval(function () {
        swiper_button_next.click(); //调用点击事件
    },
        3000);
    // 暂停播放模块
    var zt_button_img = document.querySelector('.zt_button_img')

    var flag2 = 0;
    zt_button_img.addEventListener('click', function () {
        if (flag2 == 0) {
            zt_button_img.src = 'images/bf.png'
            flag2 = 1;
        } else {
            zt_button_img.src = 'images/zt.png'
            flag2 = 0;
        }
    })


    // 检测屏幕上卷距离模块 window.pageYOffset
    // var swiperHeight = swiper.offsetHeight;
    // var nav_box = document.querySelector('.nav_box');
    // nav_boxHeight = nav_box.offsetHeight;
    // var headerNav = document.querySelector('.headerNav ');
    // var headerNavHeight = headerNav.offsetHeight;
    // var DisplayHeight = swiperHeight + nav_boxHeight + headerNavHeight;

    // var navitems_t = document.querySelector('.navitems_t'); //侧边栏的小盒子
    // var iconcontentnav = document.querySelector('.icon_content_nav');

    // document.addEventListener('scroll', function () {
    //     if (window.pageYOffset >= DisplayHeight) {
    //         iconcontentnav.className = 'icon_content_nav w icon_content_nav_fixed'
    //         navitems_t.className = 'navitems_t'

    //     } else {
    //         iconcontentnav.className = 'icon_content_nav w '
    //         navitems_t.className = 'navitems_t none'
    //     }
    // });
    // navitems_t.addEventListener('click', function () {
    //     // window.scroll(0, 0) //里面不跟单位

    //     animateTop(window, 0)
    // });
    // 返回顶部动画函数
    // function animateTop(obj, target, callback) {
    //     clearInterval(obj.timer) //先清除以前的定时器，保留当前的一个定时器执行
    //     obj.timer = setInterval(function () {
    //         var step = ((target - window.pageYOffset) / 10);
    //         step = step > 0 ? Math.ceil(step) : Math.floor(step);
    //         if (window.pageYOffset == target) {
    //             // 停止动画
    //             clearInterval(obj.timer)
    //             callback && callback();
    //         }
    //         // 降速动画步长公式，(目标位置值- 现在位置) / 10
    //         // obj.style.left = window.pageYOffset + step + 'px'
    //         window.scroll(0, window.pageYOffset + step)
    //     }, 15)
    // };

})

$(function () {
    // $(document).scrollTop(0)  可以当做锚点链接使用之间到这个位置
    // 页面滚动
    var boxtop = $(".icon_content_nav").offset().top; //获取盒子距离头部的值
    var banner = $(".banner").offset().top; //获取盒子距离头部的值
    toggleTool();//判断提前调用函数
    function toggleTool() {
        if ($(document).scrollTop() >= banner) {
            $(".navitems_t").fadeIn().css("display", "flex");
        } else {
            $(".navitems_t").fadeOut();
        }
    }

    $(window).scroll(function () {
        if ($(document).scrollTop()>= boxtop) {
            $(".icon_content_nav").addClass("icon_content_nav_fixed")
        } else {
            $(".icon_content_nav").removeClass("icon_content_nav_fixed")
        }
        toggleTool();
    })
    $(".navitems_t").click(function () {
        // $(document).scrollTop(0);
        $("body,html").stop().animate({
            scrollTop: 0
        })
    })

})